<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta name="format-detection" content="telephone = no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="progma" content="no-cache">
	<meta name="cache-control" content="no-cache, no-store, must-revalidate">
	<meta name="viewport" content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width">

	<link rel="stylesheet" href="css/view.css">
	<link rel="stylesheet" href="css/index.css">

	<title>view-group</title>
</head>
<body>
	<section data-view-id="page1" data-view="true" data-view-default="true" data-view-title = "视图1标题">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图1
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<h1>如果有多个视图声明为同一群组，则将使用DOM顺序上的第一个</h1>
		<div
			data-view-rel="~goods-detail"
			class="btn">进入群组名为：goods-detail 的视图</div>
	</section>
	<section data-view-id="goods-detail1" data-view="true" data-view-group = "goods-detail">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			商品详情1
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<img src = "img/goods-detail1.jpg"/>
		</div>
	</section>
	<section data-view-id="goods-detail2" data-view="true" data-view-group = "goods-detail">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			商品详情2
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<img src = "img/goods-detail2.jpg"/>
		</div>
	</section>

	
	<script type = "text/javascript" src = "js/view.min.js"></script>
	<script type = "text/javascript" src = "js/view.switch.js"></script>
	<script type = "text/javascript">
		var setLayoutAction = function(view){
			view.setLayoutAction(function(){
				var totalHeight = View.layout.getLayoutHeight();
				view.find(".body").style.height = (totalHeight - view.find("header").offsetHeight) + "px";
			}, true);
		};

		setLayoutAction(View.ofId("goods-detail1"));
		setLayoutAction(View.ofId("goods-detail2"));
	</script>
</body>
</html>